<template>
  <van-dialog
    v-model="diaShow.show"
    show-cancel-button
    title="签到类型"
    @confirm="confirm"
  >
  <ul class="my-content">
    <li v-for="(item, index) in menuData" :key="index" :class="{'is-checked':item.checked,pr:true}" @click="select(item)">
      {{item.label}}
      <img v-show="item.checked" class="pa" :src="selectImg">
    </li>
  </ul>
  </van-dialog>
</template>
<script>
export default {
  props:["diaShow"],
  components: {},
  name: "",
  data() {
    return {
      selectImg:require('../../../../../assets/images/home/icon-selected.png'),
      menuData:[
        {label:"课程",value:"1",checked:false},
        {label:"晚点名",value:"2",checked:false},
        {label:"宿舍",value:"3",checked:false},
        {label:"会议讲座",value:"4",checked:false},
        {label:"其他",value:"5",checked:false},
      ]
    };
  },
  methods: {
    select(item){
      this.$set(item,"checked",!item.checked)
    },
    confirm(){
      var goals=[]
      this.menuData.forEach(ele=>{
        if(ele.checked)goals.push(ele.value)
      })
      this.$set(this.diaShow,"category",goals)
      this.$emit("get_search")
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.my-content{
  padding: 20px;
  display: flex;
  flex-wrap: wrap;

  li{
    box-sizing: border-box;
    margin: 20px;
    width: 26%;
    height: 70px;
    line-height: 70px;
    text-align: center;
    border-radius: 2px;
    border: 1px solid #ddd;

    img{
      bottom: -1px;
      right: -1px;
      width: 40px;
      height: 40px;
    }
  }
  li.is-checked{
    border-color: #00998d;
    color: #00998d;
  }
}
</style>